﻿@page "/"

@using appointment_context_menu.Models

Because of the IsImportant flags set in the appointment models, you cannot delete the "Conference" and "Vet Visit" appointments.
This is reflected in the context menu options for them to showcase sample logic for altering its items.

<TelerikScheduler Data="@Appointments"
                  @bind-Date="@StartDate" Height="600px" @bind-View="@CurrView">
    <SchedulerViews>
        <SchedulerDayView StartTime="@DayStart" />
        <SchedulerWeekView StartTime="@DayStart" />
        <SchedulerMultiDayView StartTime="@DayStart" NumberOfDays="10" />
    </SchedulerViews>
    <ItemTemplate>
        @{
            SchedulerAppointment Appointment = context as SchedulerAppointment;
            <div style="height:100%" class="@( Appointment.IsImportant ? "important-appt" : "" )"
                 @oncontextmenu:preventDefault="true"
                 @oncontextmenu="@( (MouseEventArgs e) => ShowContextMenu(e, Appointment) )">
                <div style="height:100%" class="k-event-template">@Appointment.Title</div>
            </div>
        }
    </ItemTemplate>
    <AllDayItemTemplate>
        @{
            SchedulerAppointment Appointment = context as SchedulerAppointment;
            <div style="height:100%" class="@( Appointment.IsImportant ? "important-appt" : "" )"
                 @oncontextmenu:preventDefault="true"
                 @oncontextmenu="@( (MouseEventArgs e) => ShowContextMenu(e, Appointment) )">
                <div style="height:100%" class="k-event-template">@Appointment.Title</div>
            </div>
        }
    </AllDayItemTemplate>
</TelerikScheduler>

<TelerikContextMenu Data="@MenuItems" @ref="@TheContextMenu"
                    TextField="Text" IconField="Icon" DisabledField="Disabled"
                    OnClick="@( async (ContextMenuItem itm) => await MenuClickHandler(itm) )">
</TelerikContextMenu>

<style>
    .important-appt {
        color: purple;
        font-weight: bold;
        font-size: 1.5em;
    }
</style>